<template>
  <div style="min-height: 300px">
    <a-tabs>
      <a-tab-pane key="1">
        <template #title>
          <icon-calendar/> 单件管理模式
        </template>
        <h4 style="color: #f60000">单件进度详情，生产任务通知单，一行转多行下发， 比如A 3件， 会拆分A-001,A-002,A-003进行单件报工</h4>
        <a-table :bordered="{cell:true}" :pagination="false" stripe :data="entity.daJian">
          <template #columns>
            <a-table-column title="产品标识号" data-index="cpm"></a-table-column>
            <a-table-column title="下料">
              <template #cell="{ record }">
                <a-tooltip  v-if="record.xl === 1" >
                  <template #content>
                    <p>报工人员：陈宾</p>
                    <p>报告时间：2025-03-15 15:25</p>
                    <p>质检人员：李咸阳</p>
                  </template>
                  <icon-check style="color: #007460;font-size: 24px"  />
                </a-tooltip>
                <icon-close style="color: #f60000;font-size: 24px" v-else />
              </template>
            </a-table-column>
            <a-table-column title="精锻">
              <template #cell="{ record }">
                <a-tooltip  v-if="record.jd === 1" >
                  <template #content>
                    <p>报工人员：陈宾</p>
                    <p>报工时间：2025-03-15 15:25</p>
                    <p>质检人员：李咸阳</p>
                  </template>
                  <icon-check style="color: #007460;font-size: 24px"  />
                </a-tooltip>
                <icon-close style="color: #f60000;font-size: 24px" v-else />
              </template>
            </a-table-column>
            <a-table-column title="热处理">
              <template #cell="{ record }">
                <a-tooltip  v-if="record.rcl === 1" >
                  <template #content>
                    <p>报工人员：xxxxxxx公司(委外)</p>
                    <p>报工时间：2025-03-15 15:25</p>
                    <p>质检人员：李咸阳</p>
                  </template>
                  <icon-check style="color: #007460;font-size: 24px"  />
                </a-tooltip>
                <icon-close style="color: #f60000;font-size: 24px" v-else />
              </template>
            </a-table-column>
            <a-table-column title="机加工">
              <template #cell="{ record }">
                <a-tooltip  v-if="record.jjg === 1" >
                  <template #content>
                    <p>报工人员：陈宾</p>
                    <p>报工时间：2025-03-15 15:25</p>
                    <p>质检人员：李咸阳</p>
                  </template>
                  <icon-check style="color: #007460;font-size: 24px"  />
                </a-tooltip>
                <icon-close style="color: #f60000;font-size: 24px" v-else />
              </template>
            </a-table-column>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #title>
          <icon-calendar/> 批号按件、按重量模式
        </template>
        <div>
          <h4 style="color: #f60000">按件不需要拆分、棒材按重量报工需要拆分</h4>
          <a-table :bordered="{cell:true}" :pagination="false" stripe :data="entity.orderList">
            <template #columns>
              <a-table-column title="钢种" data-index="pinming" width="80"></a-table-column>
              <a-table-column title="产品标识号" data-index="cpm"></a-table-column>
              <a-table-column title="生产数量(T)" data-index="count"></a-table-column>
              <a-table-column title="锻造规格" data-index="guige"></a-table-column>
              <a-table-column title="下料完成">
                <template #cell="{record}">
                  <a @click.prevent="viewBaoGongDan">{{record.xl}}</a>
                </template>
              </a-table-column>
              <a-table-column title="精锻完成">
                <template #cell="{record}">
                  <a @click.prevent="viewBaoGongDan">{{record.jl}}</a>
                </template>
              </a-table-column>
              <a-table-column title="热处理完成" data-index="rcl"></a-table-column>
              <a-table-column title="机加工完成" data-index="jjg"></a-table-column>
            </template>
          </a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
    <a-modal title="产品工序进度" v-model:visible="entity.bgdVisible" :footer="false" width="1280px">
      <JindubaogongView v-if="entity.bgdVisible" v-model="entity.bgdVisible"></JindubaogongView>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, defineProps, defineEmits, nextTick, defineAsyncComponent } from "vue";
const JindubaogongView = defineAsyncComponent(() => import('@/views/product/tasktz/jindubaogongview.vue'));

const emit = defineEmits(['update:modelValue'])
let props = defineProps({
  modelValue : {type : Boolean, default: true},
  entityId : {type : Number, default: 0}
})
let entity = reactive({
  orderList : [
    {lineno:10, hth:'2022-2L-29',pinming:'H13',guige:'@220(0,+3)', count:'27.45T', cpm:'H13-A1', llgg:'31.5T', xl:'33.8T', jl:'33.5T', rcl:'33.5T', jjg:'20.5T'},
    {lineno:20, hth:'2022-2L-29',pinming:'H13',guige:'@250(0,+3)', count:'15.45T', cpm:'H13-A2', llgg:'18.5T', xl:'15.8T', jl:'15.3T', rcl:'0', jjg:'0'},
    {lineno:30, hth:'2022-2L-29',pinming:'H15',guige:'@320(0,+5)', count:'27.45T', cpm:'H15-A1', llgg:'31.8T', xl:'0', jl:'0', rcl:'0', jjg:'0'}
  ],
  orderSubList:[{lineno:20, hth:'2022-2L-29',pinming:'H13',guige:'@250(0,+3)', count:'15.45T/件', cpm:'H13-A1', llgg:'18.5T/件', xl:'15.8T/件', jl:'15.3T/件', rcl:'0', jjg:'0'}],
  daJian:[{
    cpm:'H13-A1-001', xl:1, jd:1, rcl:1, jjg:1
  },{
    cpm:'H13-A1-002', xl:1, jd:1, rcl:1, jjg:0
  },{
    cpm:'H13-A1-003', xl:1, jd:0, rcl:0, jjg:0
  },{
    cpm:'H13-A1-004', xl:1, jd:0, rcl:0, jjg:0
  },{
    cpm:'H13-A1-005', xl:0, jd:0, rcl:0, jjg:0
  }],
  bgdVisible:false
})
const viewBaoGongDan = (id)=>{
  entity.bgdVisible = true
}
</script>

<style scoped>

</style>
